<template>
  <view class="message-board">
    <uni-section type="line" title="留言板">
      <template #right>
        <slot name="right"></slot>
      </template>
    </uni-section>

    <template v-if="prop.leaveWordList.length > 0">
      <scroll-view class="info-scroll-view" scroll-y>
        <view
          class="msg-item"
          v-for="item in prop.leaveWordList"
          :key="item.id"
        >
          <view class="icon">
            <uni-icons type="contact" size="40" />
          </view>

          <view class="msgUser">
            <view class="msg-tip title">
              <text style="margin-right: 20rpx">{{ item.username }}</text>
              <uni-tag
                class="tag"
                v-if="item.authCode == 1"
                text="教师"
                type="primary"
              />
              <uni-tag
                class="tag"
                v-else-if="item.authCode == 2"
                text="学生"
                type="warning"
              />
              <view class="action">
                <slot name="action" :row="item"></slot>
              </view>
            </view>
            <view class="content">
              <text>{{ item.content }}</text>
            </view>
            <view class="msg-tip">
              <text> {{ format(item.createTime) }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </template>
    <template v-else>
      <view class="empty">
        <text>暂无留言!</text>
      </view>
    </template>
    <view class="input-wrap">
      <view class="input-content">
        <uni-easyinput
          v-model="content"
          type="textarea"
          autoHeight
          placeholder="请输入留言内容"
          @confirm="sendHandler"
        />
      </view>
      <button @click="sendHandler" class="input-btn">发送</button>
    </view>
  </view>
</template>

<script setup>
import { timeFormat } from "@climblee/uv-ui/libs/function";
const format = (val) => {
  return timeFormat(val, "yyyy-mm-dd hh:MM:ss");
};

const content = ref("");
const emit = defineEmits("send");
const sendHandler = () => {
  emit("send", content.value);
  content.value = "";
};
const prop = defineProps({
  leaveWordList: {
    type: Array,
    default: [],
  },
});
</script>

<style lang="scss" scoped>
.input-wrap {
  display: flex;
  width: 100%;
  align-items: flex-end;
  box-sizing: border-box;
  padding-left: 20rpx;
  padding-top: 20rpx;
  .input-content {
    width: 80%;
  }
  .input-btn {
    height: 60rpx;
    line-height: 60rpx;
    background-color: rgba($color: #007aff, $alpha: 0.2);
    border: 1$uni-color-primary solid 2px;
    color: $uni-color-primary;
    font-size: 26rpx;
  }
}
.msg-item {
  display: flex;
  margin-bottom: 20rpx;
  .icon {
    margin: 10rpx;
    width: 80rpx;
    height: 80rpx;
    box-sizing: border-box;
  }
  .msgUser {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 150rpx;
  }
}
.info-scroll-view {
  max-height: 600rpx;
}
.empty {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
.content {
  font-size: 28rpx;
}
.title{
  height: 40rpx;
  line-height: 40rpx;
}
.msg-tip {
  color: #7c7878;
  font-size: 24rpx;
  display: flex;
  width: 100%;
  .tag {
   height: 40rpx;
  line-height: 40rpx;
  }
  .action {
    margin-left: auto;
    margin-right: 30rpx;
    display: flex;
  }
}
.message-board {
  background-color: #fff;
  position: relative;
}
</style>
